<template>
  <div>
    <van-nav-bar :title="bookname" left-arrow @click-left="onClickLeft" />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div>
          <div v-if="list.length == 0">
              暂无章节
          </div>
          <div v-else class="item" v-for="(item,index) in list" :key="index">
             <span>第{{(index+1)}}章  {{item.chapterName}}</span>
          </div> 
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import bookrequst from "@/api/book";
import { NavBar, List, PullRefresh, Cell, CellGroup ,Toast } from "vant";
export default {
  components: {
    [NavBar.name]: NavBar,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Toast.name]: Toast
  },
  data() {
    return {
      bookId: this.$route.query.bookId,
      bookname: this.$route.query.bookname,
      list: [],
      loading: false,
      finished: false,
      isLoading: false,
    };
  },
  created() {
    this.getChapterList();
  },
  methods: {
    onClickLeft() {
      if (window.history.length <= 1) {
        this.$router.push("/");
        return false;
      } else {
        this.$router.go(-1);
      }
    },

    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        Toast.success('刷新成功')
        this.getChapterList();
      }, 1000);
    },
    getChapterList() {
      bookrequst.capterList(this.bookId).then((res) => {
        this.list = res.data.data;
      });
    },
  },
};
</script>

<style  scoped>
.item{
    display: flex;
    width: 100%;
    height: 45px;
    align-items: center;
    padding-left:12% ;
    border-bottom: 1px solid rgb(235, 235, 235);
}
</style>
  
